<form class="filter">
    <div class="row">
        <div class="span7">
            <?php
            echo CHtml::label('Filter Product', null);
            echo CHtml::textField('name-filter', null, array('class' => 'span2','placeholder'=>'Product name'));
            echo CHtml::dropDownList('category-id-filter', array(), $topCat, array('prompt' => '---Select---','style' => 'margin-left:10px;','encode'=>false));
            echo CHtml::dropDownList('product-status-filter', array(), array(1 => 'Active', 0 => 'Inactive'), array('prompt' => '---Select---', 'style' => 'width:110px;margin-left:20px'));
            ?>
        </div>
        <div class="span4">
            <label><?php echo CHtml::checkBox('on-sale-filter'); ?> On Sale</label>
            <?php
            $this->widget('zii.widgets.jui.CJuiDatePicker', array(
                'name' => 'start-date-filter',
                // additional javascript options for the date picker plugin
                'options' => array(
                    'showAnim' => 'fold',
                    'onClose' => 'js:function( selectedDate ) {
                    $( "#end_date" ).datepicker( "option", "minDate", selectedDate );
                }',
                ),
                'htmlOptions' => array(
                    'readonly' => true,
                    'style'=>'width:110px'
                ),
            ));
            echo ' - ';
            $this->widget('zii.widgets.jui.CJuiDatePicker', array(
                'name' => 'end-date-filter',
                // additional javascript options for the date picker plugin
                'options' => array(
                    'showAnim' => 'fold',
                    'onClose' => 'js:function( selectedDate ) {
                    $( "#start_date" ).datepicker( "option", "maxDate", selectedDate );
                }'
                ),
                'htmlOptions' => array(
                    'readonly' => true,
                    'style'=>'width:110px'
                ),
            ));?>
        </div>
        <div class="span1">
            <label></label>
            <?php echo CHtml::button('Filter', array('class' => 'btn btn-info', 'id' => 'btn-filter')) ?>
        </div>
    </div>
</form>
<div id="data-container">
    <table class="table table-bordered">
        <thead>
        <tr>
            <th></th>
            <th>Name</th>
            <th>SKU</th>
            <th>Top Categories</th>
            <th>Second Categories</th>
            <th>Linked Categories</th>
        </tr>
        </thead>
        <tbody>
        <?php
        $this->widget('zii.widgets.CListView', array(
            'dataProvider' => $dataProvider,
            'itemView' => '_assign',
            'viewData' => array('topCat' => $topCat),
        ));
        ?>
        </tbody>
    </table>
</div>
<?php
Yii::app()->clientScript->registerCss('pager', '
.yiiPager{
    display:block;
    clear:both;
    width:100%;
}
');
Yii::app()->clientScript->registerScript('assign', '
    $(".secondCategory").live("change",function(e){
        var product_id=$(this).parent().parent().attr("data-id");
        if($(this).val()!=""){
            $.ajax({
                type:"POST",
                data:"category_id="+$(this).val()+"&product_id="+product_id,
                url:"' . $this->createUrl('assign') . '",
                success:function(data){
                    var url="' . $this->createUrl('AssignCategory') . '";
                    $(".filter input,.filter select").each(function(){
                        if($(this).attr("type")=="checkbox")
                            url+="&"+$(this).attr("name")+"="+$(this).prop("checked");
                        else
                            url+="&"+$(this).attr("name")+"="+$(this).val();
                    })
                    if($(".page").length > 0){
                        url = $(".selected a").attr("href");
                    }
                    $("#category_holder_"+product_id).load(url+" #category_holder_"+product_id+" >*");
                }
            })
        }
    })
    $(".topCategory").live("change",function(){
          var product_id=$(this).parent().parent().attr("data-id");
          if($(this).val()!=""){
          var parent=$(this).parent().parent();
          $.ajax({
                type:"POST",
                data:"category_id="+$(this).val()+"&product_id="+product_id,
                url:"' . $this->createUrl('getSecondCategories') . '",
                success:function(data){
                    data=jQuery.parseJSON(data);
                    var second=parent.find(".secondCategory").first();
                    second.html("<option>---Select---</option>");
                    $.each(data,function(index,value){
                        second.append("<option value=\'"+index+"\'>"+value+"</option>");
                    })
                }
          })
        }
    });
    $(".cat-link").live("contextmenu", function(){
        $(this).popover({
            html:true
        }).popover("show");
        return false;
    });
    $(".unassign").live("click",function(e){
        e.preventDefault();
        var category_id=$(this).attr("href");
        var product_id=$(this).attr("data-id");
        var current=$(this);
        $.ajax({
                type:"POST",
                data:"category_id="+category_id+"&product_id="+product_id,
                url:"' . $this->createUrl('unassign') . '",
                success:function(data){
                    var url="' . $this->createUrl('AssignCategory') . '";
                    $(".filter input,.filter select").each(function(){
                        if($(this).attr("type")=="checkbox")
                            url+="&"+$(this).attr("name")+"="+$(this).prop("checked");
                        else
                            url+="&"+$(this).attr("name")+"="+$(this).val();
                    })
                    if($(".page").length > 0){
                        url = $(".selected a").attr("href");
                    }
                   $("#category_holder_"+product_id).load(url+" #category_holder_"+product_id+" >*");
                }
        })
    })
    $(".cancel").live("click",function(e){
        e.preventDefault();
        $(".popover").hide();
    });
', CClientScript::POS_HEAD);

Yii::app()->clientScript->registerScript('filter', '
    $("#btn-filter").live("click",function(e){
        var url="' . $this->createUrl('AssignCategory') . '";
        $(".filter input,.filter select").each(function(){
            if($(this).attr("type")=="checkbox")
                url+="&"+$(this).attr("name")+"="+$(this).prop("checked");
            else{
                var value=$(this).val();
                value=encodeURIComponent(value).replace(/[!"()*]/g, escape);
                url+="&"+$(this).attr("name")+"="+value;
            }
        })
        console.log(url);
        $("#data-container").load(url+" #data-container >*");
    })
    $(".page a,.next a,.previous a").live("click",function(e){
        e.preventDefault();
        $("#data-container").load($(this).attr("href")+" #data-container >*");
    })
', CClientScript::POS_HEAD);
?>